<template>
  <div id="container"></div>
  <p class="tip">提示:只定位到城市级别，非用户具体地址</p>
</template>

<script setup lang="ts">
  import AMapLoader from '@amap/amap-jsapi-loader';

  import { getAccessList } from '@/apis/ip';
  import type { IIp, IMark } from '@/apis/type';

  const list: Ref<Array<IMark>> = ref([]);
  // 请求访客列表数据
  const getAccessListFun = async () => {
    const res = await getAccessList();
    res.data.rows.map((item: IIp) => {
      const obj: IMark = {
        lon: item.lon,
        lat: item.lat,
        ip_address: item.ip_address
      };
      if (!list.value.some(key => JSON.stringify(key) === JSON.stringify(obj)) && obj.lon) {
        list.value.push(obj);
      }
    });
  };
  getAccessListFun();
  // 地图实例
  let mapObj = shallowRef();
  // 信息窗体实例
  const infoWindow: any = ref();
  // 标集合
  const marksList = ref<any>();
  // 地图
  AMapLoader.load({
    key: 'd1441e1b15d9ba6a11575be1e2b3bb54', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    AMapUI: {
      // 是否加载 AMapUI，缺省不加载
      version: '1.1', // AMapUI 缺省 1.1
      plugins: ['geo/DistrictExplorer'] // 需要加载的 AMapUI ui插件
    },
    plugins: ['AMap.DistrictLayer', 'AMap.Scale', 'AMap.ToolBar'],
    Loca: {
      // 是否加载 Loca， 缺省不加载
      version: '2.0.0' // Loca 版本，缺省 2.0.0
    }
  })
    .then((AMap: any) => {
      let defaultLayer = new AMap.createDefaultLayer();
      let disCountry = new AMap.DistrictLayer.Country({
        zIndex: 15,
        SOC: 'CHN',
        depth: 0,
        styles: {
          'nation-stroke': '#bbdaf1',
          'coastline-stroke': '#bbdaf1',
          'province-stroke': '#bbdaf1',
          'city-stroke': '#bbdaf1',
          'fill': 'rgba(0,0,0,0.2)'
        }
      });
      mapObj.value = new AMap.Map('container', {
        // 设置地图容器id
        zoom: 5, // 初始化地图级别
        mapStyle: 'amap://styles/9e4464a597c5a54f1933f9f7db92806f', //设置地图的显示样式
        viewMode: '3D', // 是否为3D地图模式
        center: [116.405285, 39.904989], // 初始化地图中心点位置
        layers: [
          disCountry,
          defaultLayer // disCountry 跟 defaultLayer 一定要搭配使用 不然只使用 disCountry 会导致不显示省市名称
        ]
      });

      // 添加标记点
      const markList: any = [];
      for (let i = 0; i < list.value.length; i++) {
        let marker = new AMap.Marker({
          position: [list.value[i].lon, list.value[i].lat],
          title: list.value[i].ip_address
        });
        // 信息窗体

        // // 创建 infoWindow 实例
        infoWindow.value = new AMap.InfoWindow({
          anchor: 'top-left',
          offset: new AMap.Pixel(0, -30)
        });
        const content = `<div style="margin-left: 5px">
                <div>坐标：${list.value[i].ip_address}</div>
                 `;
        marker.content = content; // 绑定方法
        marker.on('click', clickMapPoint);
        markList.push(marker);
      } // 拿到所有的点
      marksList.value = markList; // 地图里添加标记点
      mapObj.value.add(marksList.value);
    })
    .catch(e => {
      console.log(e);
    });
  // 点击点标记
  const clickMapPoint = (e: any) => {
    infoWindow.value.setContent(e.target.content);
    infoWindow.value.open(mapObj.value, e.target.getPosition());
  };
</script>

<style lang="scss" scoped>
  #container {
    width: 100%;
    height: 100%;
  }
  .tip {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    margin: auto;
    background-color: var(--bg-color);
    text-align: center;
    color: var(--text-color);
  }
</style>
